<template>
    <breadcrumb base-title="工具" title="电销黑名单" />
    <div class="clientpond">
        <div class="form-box">
            <div class="title">筛选</div>
            <div class="line"></div>
            <div class="search-box">
                <div class="items-center">
                    <div class="key">手机号：</div>
                    <el-input v-model="phoneValue" style="width: 234px;height: 32px;" placeholder="请输入"
                        @input="onSearch" />
                </div>
            </div>
        </div>
        <div class="table-box">
            <div class="justify-between head">
                <div class="title">黑名单列表</div>
                <el-button type="primary" class="btn-import" @click="() => { isPop = true }">
                    <el-icon>
                        <Upload />
                    </el-icon>导入
                </el-button>
            </div>
            <div class="">
                <el-table :data="data" @sort-change="sort_change" style="width: 100%"
                    :cell-style="{ padding: '20px 0', color: '#202536' }"
                    :header-cell-style="{ background: '#FAFAFC', color: '#202536', padding: '12px 0' }">
                    <el-table-column prop="phone" label="手机号" />
                    <el-table-column prop="createTime" label="录入时间">
                        <template #default="scope">
                            <div>
                                {{
                                    dayjs(scope.row.createTime.toString()).format('YYYY-MM-DD HH:mm')
                                }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="right">
                        <template #default="scope">
                            <div class="delete pointer" @click="onDelete(scope.row.id)">删除</div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="justify-between pagination-box">
                <div></div>
                <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 50, 70, 100]" :size="size" :disabled="disabled" :background="background"
                    layout="sizes, prev, pager, next" :total="total" @change="getTmBlacklist"
                    @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>

    <UploadFilePopup :isPop="isPop" @submit="onSubmitPop" @close="onClose"></UploadFilePopup>
</template>

<script setup>
// 引入ref
import { ref, onMounted } from 'vue'
import { tmBlacklist, delTmBlack } from '@/api/tmBlacklist/index'
import { shake, confirm } from '@/utils/utils'
import UploadFilePopup from './components/upload-file-popup.vue'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
const phoneValue = ref('')
const data = ref()
const total = ref(0)
const pageNum = ref(1)
const pageSize = ref(10)
const isPop = ref(false)
const getTmBlacklist = async () => {
    console.log('触发了吗')
    const result = await tmBlacklist({
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        phone: phoneValue.value,
    })
    data.value = result.rows
    total.value = result.total
    console.log(data.value, 'datadata')
}
// 搜索
const onSearch = () => {
    shake(() => {
        pageNum.value = 1
        getTmBlacklist()
        console.log(phoneValue.value, '输入了')
    })
}
const onDelete = (id) => {
    confirm('提示', '删除后该号码将变成普通号码，是否确定删除？').then(async () => {
        console.log('点击了', id)
        await delTmBlack({
            id: id
        })
        ElMessage.success('删除成功')
        await getTmBlacklist()
    })
}
// 
const onSubmitPop = async () => {
    console.log('回调')
    isPop.value = false
    await getTmBlacklist()
}

const onClose = async () => { 
    console.log('关闭换掉')
    isPop.value = false
}

onMounted(() => {
    getTmBlacklist()
})
</script>

<style lang="scss" scoped>
.clientpond {
    padding: 16px;

    .form-box {
        background-color: #ffffff;
        border-top-right-radius: 8px;
        width: 100%;
        box-sizing: border-box;
        padding: 0 8px;
        border-radius: 8px;

        .title {
            padding: 16px;
            color: #3D3D3D;
            font-size: 16px;
            font-weight: 600;
        }

        .line {
            border-bottom: 1px solid #F4F4F7;
        }
    }

    .search-box {
        padding: 16px 29px;
        box-sizing: border-box;

        .key {
            color: #202536;
            font-size: 14px;
        }
    }

    .table-box {
        padding: 12px 24px;
        background-color: #FFFFFF;
        border-radius: 8px;
        margin-top: 16px;

        .title {
            color: #3D3D3D;
            font-size: 16px;
            font-weight: 600;
        }

        .head {
            margin-bottom: 12px;
        }

        .btn-import {}

        .pagination-box {
            margin-top: 20px;
        }

        .delete {
            color: #3E5FF5;
            font-size: 14px;
            cursor: pointer;
        }
    }
}

.items-center {
    display: flex;
    align-items: center;
}

.justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>